<template>
  <info-container :title=title class="form-layout">
    <form-info-input class="form-input" v-for="item in formInput" :key="item.id" :title="item.title"
      :isSelect="item.isSelect" />
    <el-button class="form-btn1">{{ buttonInfo[0] }}</el-button>
    <el-button class="form-btn2">{{ buttonInfo[1] }}</el-button>
  </info-container>
</template>


<script>
import FormInfoInput from './FormInfoInput.vue';
import InfoContainer from "./InfoContainer.vue"
//ES6模块的语法，允许将一个模块的对象函数导出以便其他模块可以通过import语句导入它
export default {//export default在import的时候不需要添加{}
  // 该组件依赖的子组件，可以导出
  components: {
    FormInfoInput,
    InfoContainer
  },
  props: {
    formInput: {
      type: Array,
      required: false,
      default: [
        {
          title: "Task1",
          isSelect: true
        }, {
          title: "Task2",
          isSelect: false
        }, {
          title: "Task3",
          isSelect: true
        }, {
          title: "Task4",
          isSelect: true
        },
      ],
    },
    title: {
      type: String,
      required: false,
      default: "算力配置"
    },
    buttonInfo: {
      type: Array,
      required: false,
      default: ["Import", "Offload"]
    }
  },
  data() {//放组件的初始化数据，是组件需要响应式变化的数据
    return {

    };
  }
}
</script>
<style lang="scss" scoped>
$form-width: 100%;
$form-height: 100%;
$form-input-height: 70px;
$form-input-weight: 100%;

:deep .el-button {
  width: 172.8px;
  height: 40px;
}

.form-layout {
  width: $form-width;
  height: $form-height;

  .form-input {
    height: $form-input-height;
    width: $form-input-weight;
    margin-right: 50px;
    margin-bottom: 20px;
  }

  .form-btn1 {
    color: black;
  }

  .form-btn2 {
    color: white;
    background-color: rgb(12, 120, 225);
  }

  .form-btn2:hover {
    background-color: rgb(121, 187, 255);

  }
}
</style>